<template>
    <div class="traffic">
        <el-button type="primary" @click="handleClick">实时路况</el-button>
    </div>
</template>

<script setup>
import { query } from '../../utils/query'
import { ref, onMounted } from 'vue'
let $map = null
onMounted(() => {
    $map = inject("$map")
    const service = {
        name: 'guanggu',
        layerId: 1
    }
    query({
        service,
        callback: handleQuery
    })
    function handleQuery(data) {
        let source = new ol.source.Vector({});
        var publicLayer = new ol.layer.Vector({
            source,
            name: "实时路况"
        });
        $map.addLayer(publicLayer)
        publicLayer.setVisible(false)
        //取出遍历flow属性再进行颜色设置
        var format = new Zondy.Format.PolygonJSON();
        var features = format.read(data)
        let color = null
        features.forEach(item => {
            let flow = item.values_.values_["车流量"]
            if (flow < 1000) {
                color = "#398439";
            } else if (flow >= 1000 && flow < 1500) {
                color = "#ec971f";
            } else if (flow >= 1500 && flow < 2000) {
                color = "#ff2d51";
            } else {
                color = "#8d1b17";
            }

            item.setStyle(
                new ol.style.Style({
                    //边线颜色
                    stroke: new ol.style.Stroke({
                        color,
                        width: 10,
                    }),
                })
            );
        })
        source.addFeatures(features)
    }
})
let isToggle = false;
function handleClick() {
    let layers = []
    layers = $map.getLayers().array_
    var obj = layers.find(item => item.get("name") == "实时路况")
    isToggle = !isToggle
    if (isToggle) {
        obj.setVisible(true)
    } else {
        obj.setVisible(false)
    }
}



</script>

<style lang="scss" scoped>
.traffic {
    button {
        position: fixed;
        bottom: 10px;
        right: 155px;
        z-index: 99;
    }
}
</style>